import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { ReportCaseResultDto } from '@/api/insurance/period/types'
import type { VxeColumnSlotTypes } from 'vxe-table'

@Component
export class InsurancePerlodScheme extends TableRender {
    noTablePadding = true
    tableColumnConfigOld = () => [
        {
            field: 'id',
            title: '方案ID',
        },
        {
            field: 'id',
            title: '方案简称',
        },
        {
            field: 'id',
            title: '开通时间',
        },
        {
            field: 'id',
            title: '方案类型',
        },
        {
            slots: {
                header: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return (
                        <div class="text-center text-green">
                            1-3类
                        </div>
                    )
                }
            },
            children: [
                { field: '成本保费', title: '保费' },
                { field: '优惠', title: '优惠' },
                { field: '实际保费', title: '实际保费' },
            ]
        },
        {
            slots: {
                header: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return (
                        <div class="text-center text-blue-light-400">
                            4类
                        </div>
                    )
                }
            },
            children: [
                { field: '成本保费', title: '保费' },
                { field: '优惠', title: '优惠' },
                { field: '实际保费', title: '实际保费' },
            ]
        },
        {
            field: 'id',
            title: '状态',
        },
        {
            field: 'id',
            title: '操作',
        },
    ] as TableRenderColumnTypes<ReportCaseResultDto>
    render() { 
        return (
            <div class="md:flex md:flex-col h-full overflow-auto">
                {this.renderTable()}
                {this.renderPager()}
            </div>
        )
    }
}

export default toNative<{}, {}>(InsurancePerlodScheme)